<template>
  <div class="app-container">
    <div
      style="
        width: 100%;
        height: 5%;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 30px;
      "
    >
      <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    </div>
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        新建
      </el-button>
      <el-button
        class="filter-item"
        type="danger"
        icon="el-icon-remove"
        @click="handleRemove"
      >
        删除
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 15px"
        type="info"
        icon="el-icon-refresh"
        @click="handleRefresh"
      >
        刷新
      </el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="list"
      stripe
      border
      tooltip-effect="light"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column label="序号" type="index" width="55" align="center">
        <template slot-scope="scope">
          <span>{{
            (listQuery.current - 1) * listQuery.size + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="false" align="center" prop="id" label="id" />
      <el-table-column
        align="center"
        prop="normNum"
        label="标准号"
        width="180"
      />
      <el-table-column
        align="center"
        prop="normName"
        label="标准名称"
        width="400"
      />
      <el-table-column
        align="center"
        prop="type"
        label="类型"
        width="55"
        :formatter="typeFormatter"
      />
      <el-table-column
        align="center"
        prop="status"
        label="状态"
        width="55"
        :formatter="statusFormatter"
      />
      <el-table-column
        align="center"
        prop="releaseDate"
        label="发布日期"
        :formatter="dateFormatter"
      />
      <el-table-column
        align="center"
        prop="realTime"
        label="实时日期"
        :formatter="dateFormatter"
      />
      <el-table-column align="center" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handlePDFClick(scope.row)"
            >预览</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

    <el-dialog
      :title.sync="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
      align="center"
      :before-close="handleClose"
    >
      <el-container style="width: 85%">
        <el-form
          ref="item"
          :rules="rules"
          style="width: 100%"
          label-position="right"
          label-width="30%"
          :model="item"
        >
          <el-form-item v-show="false" label="id">
            <el-input v-model="item.id" />
          </el-form-item>
          <el-form-item label="标准号" prop="normNum">
            <el-input v-model="item.normNum" :disabled="!dialogEdit" />
          </el-form-item>
          <el-form-item label="标准名称" prop="normName">
            <el-input v-model="item.normName" :disabled="!dialogEdit" />
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select
              v-model="item.type"
              :disabled="!dialogEdit"
              style="width: 100%"
            >
              <el-option key="1" label="推标" value="1" />
              <el-option key="2" label="规范" value="2" />
              <el-option key="3" label="强标" value="3" />
              <el-option key="4" label="文件" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="发布日期">
            <el-date-picker
              v-model="item.releaseDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              :disabled="!dialogEdit"
            />
          </el-form-item>
          <el-form-item label="实时日期">
            <el-date-picker
              v-model="item.realTime"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              :disabled="!dialogEdit"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="item.status"
              :disabled="!dialogEdit"
              style="width: 100%"
            >
              <el-option key="1" label="现行" value="1" />
              <el-option key="2" label="即将实施" value="2" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-container>
      <span v-if="dialogEdit" slot="footer" class="dialog-footer">
        <el-button @click="handleRefreshRule('item')">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('item')"
          >确 定</el-button
        >
      </span>
      <span v-else slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      v-loading="pdfLoading"
      :title.sync="pdfName"
      :visible.sync="pdfVisible"
      width="70%"
      align="center"
    >
      <pdf
        v-for="i in pdfDetail.numPages"
        :key="i"
        ref="pdf"
        :src="pdfDetail.url"
        :page="i"
      />
    </el-dialog>
  </div>
</template>

<script>
import { page, addOrUpdate, removes } from "@/api/manage";
import Pagination from "@/components/Pagination";
import pdf from "vue-pdf";
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import { mapGetters } from "vuex";
export default {
  name: "ManageHosit",
  components: { Pagination, pdf, Breadcrumb },
  computed: {
    naviItems() {
      return [
        { text: this.equTypeName },
        { text: "数据测试" },
        { text: "标准治理" },
        { text: "一般通用" },
      ];
    },
    ...mapGetters(["equTypeName"]),
  },
  data() {
    return {
      total: 0,
      listLoading: true,
      selectionItem: [],
      dialogVisible: false,
      dialogTitle: "新增标准治理",
      dialogEdit: true,
      listQuery: {
        current: 1,
        size: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id",
        normTypeId: 1,
      },
      rules: {
        normNum: [
          {
            required: true,
            message: "请输入标准号",
            trigger: "blur",
          },
        ],
        normName: [
          {
            required: true,
            message: "请输入标准名",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请输入类型",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "请输入状态",
            trigger: "blur",
          },
        ],
      },
      list: [],
      item: {
        normTypeId: 1,
      },
      pdfVisible: false,
      pdfLoading: true,
      pdfName: "",
      host: "http://47.106.99.192/",
      pdfDetail: {
        numPages: 0,
        url: "",
      },
    };
  },

  created() {
    this.getList();
  },

  methods: {
    getList() {
      this.listLoading = true;
      page(this.listQuery).then((response) => {
        this.list = response.data.records;
        this.total = response.data.total;

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },

    /**
     * 单行编辑
     * @param row
     */
    handleClick(row, isEdit) {
      this.item = row;
      this.dialogVisible = true;
      this.dialogTitle = "标准详情";
      this.dialogEdit = isEdit;
    },

    /**
     * 单行编辑
     * @param row
     */
    handlePDFClick(row) {
      // this.pdfDetail = {
      //   numPages: 0,
      //   url: ''
      // }
      if (!row.pdfUrl) {
        alert("资料尚不齐全，请耐心等待！");
        return;
      }

      if (row.pdfUrl.indexOf("http") > -1) {
        // window.location.href = row.pdfUrl
        window.open(row.pdfUrl, "_blank");
      } else {
        this.pdfLoading = true;
        this.pdfVisible = true;
        this.pdfName = row.normName;
        this.pdfDetail.url = this.host + row.pdfUrl;
        const loadingTask = pdf.createLoadingTask(this.pdfDetail.url);
        loadingTask.promise
          .then((pdf) => {
            this.pdfDetail.numPages = pdf.numPages;
          })
          .then(() => {
            this.pdfLoading = false;
          })
          .catch((err) => {
            console.error("pdf 加载失败", err);
          });
      }
    },

    /**
     * 添加
     */
    handleCreate() {
      this.dialogVisible = true;
      this.dialogTitle = "新增标准治理";
      this.item = {
        status: "1",
        type: "1",
        normTypeId: 1,
      };
      this.dialogEdit = true;
    },

    /**
     * 删除
     */
    handleRemove(index, row) {
      const data = [];
      if (row) {
        data.push(`ids=${row.id}`);
      } else {
        if (this.selectionItem.length < 1) return;
        this.selectionItem.forEach((item) => {
          data.push(`ids=${item.id}`);
        });
      }
      removes(data.join("&")).then((response) => {
        this.getList();
      });
    },

    /**
     * 刷新
     */
    handleRefresh() {
      this.getList();
    },

    /**
     * 多选行
     * @param rows
     */
    handleSelectionChange(rows) {
      this.selectionItem = rows;
    },

    /**
     * dialog关闭
     * @param done
     */
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          // done();
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },

    handleConfirm(formName) {
      this.listLoading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.item.releaseDate = new Date(this.item.releaseDate);
          this.item.realTime = new Date(this.item.realTime);
          addOrUpdate(this.item)
            .then()
            .then((response) => {
              this.dialogVisible = false;
              this.getList();

              // Just to simulate the time of the request
              setTimeout(() => {
                this.listLoading = false;
              }, 1.5 * 1000);
            });
        } else {
          return false;
        }
      });
    },

    typeFormatter(row, column, cellValue, index) {
      switch (cellValue) {
        case "1":
          return "推标";
        case "2":
          return "规范";
        case "3":
          return "强标";
        case "4":
          return "文件";
      }
    },

    statusFormatter(row, column, cellValue, index) {
      switch (cellValue) {
        case "1":
          return "现行";
        case "2":
          return "即将实施";
      }
    },

    dateFormatter(row, column, cellValue, index) {
      return !cellValue || cellValue.split("T")[0];
    },

    handleRefreshRule(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
</style>
